// 实现这个项目的构建任务
const {src, dest, parallel, series, watch} = require('gulp');

// 导入依赖
const del = require('del')
const browserSync = require('browser-sync')
const loadPlugins = require('gulp-load-plugins')

// 初始化
const bs = browserSync.create()
const plugins = loadPlugins()

const data = require('./pages.config')

// 删除文件任务
const clean = () => {
    return del(['dist', 'temp'])
}

// 样式处理任务
const style = () => {
    return src('src/assets/styles/*.scss', {base: 'src'})
        .pipe(plugins.sass({outputStyle: 'expanded'}))
        .pipe(dest('temp'))
        .pipe(bs.reload({stream: true}))
}

// js脚本处理任务
const script = () => {
    return src('src/assets/scripts/*.js', {base: 'src'})
    .pipe(plugins.babel({presets: ['@babel/preset-env']}))
    .pipe(dest('temp'))
    .pipe(bs.reload({stream: true}))
}

// html界面处理任务
const page = () => {
    return src('src/*.html', {base: 'src'})
    .pipe(plugins.swig({data, defaults: {cache: false}}))
    .pipe(dest('temp'))
    .pipe(bs.reload({stream: true}))
}

// HTML文件合并文件标记处理
const useref = () => {
    return src('temp/*.html', {base: 'temp'})
        .pipe(plugins.useref({searchPath: ['temp', '.']}))
        .pipe(plugins.if(/\.js$/, plugins.uglify()))
        .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
        .pipe(plugins.if(/\.html$/, plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true
        })))
        .pipe(dest('dist'))
}

const image = () => {
    return src('src/assets/images/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
    return src('src/assets/fonts/**', {base: 'src'})
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const serve = () => {
    watch('src/assets/styles/*.scss', style)
    watch('src/assets/scripts/*.js', script)
    watch('src/*.html', page)
    watch([
        'src/assets/images/**',
        'src/assets/fonts/**',
        'public/**'
    ], bs.reload())

    bs.init({
        notify: false,
        port: 8080,
        server: {
            baseDir: ['temp', 'src', 'public'],
            routes: {
                '/node_modules': 'node_modules'
            }
        }
    })
}

// 拷贝静态资源任务
const extra = () => {
    return src('public/**', {base: 'public'})
    .pipe(dest('dist'))
}

const compile = parallel(style, script, page)
const develop = series(compile, serve)
const build = series (
    clean,
    parallel(
        series(compile, useref),
        image,
        font, 
        extra
    )
)

module.exports = {
    clean,
    develop,
    build
}